<template>
    <div>
        <!--dialog-->
        <el-dialog title="添加项目" :visible.sync="addProjectDialogVisi" width="90%" :before-close="close">
            <el-form :model="userData" :rules="rules" ref="projectForm">
                <el-row :gutter="10">
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="项目编号" :label-width="formLabelWidth" prop="projectSeq">
                            <el-input size="small" v-model="userData.projectSeq" auto-complete="off" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="项目标题" :label-width="formLabelWidth" prop="proTitle">
                            <el-input size="small" v-model="userData.proTitle" auto-complete="off" :disabled="false">
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="图片数量" :label-width="formLabelWidth" prop="picNum">
                            <el-input size="small" v-model="userData.picNum" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="访问数量" :label-width="formLabelWidth" prop="accessCount">
                            <el-input size="small" v-model="userData.accessCount" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                            <el-select v-model="userData.status" placeholder="请选择">
                                <el-option  :key=0 label="未开始" :value=0></el-option>
                                <el-option  :key=1 label="开始" :value=1 > </el-option>
                                <el-option  :key=2 label="完毕" :value=2> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="是否显示" :label-width="formLabelWidth" prop="showFlag">
                            <el-select v-model="userData.isShow" placeholder="请选择">
                                <el-option  :key=0 label="是" :value=0 ></el-option>
                                <el-option  :key=1 label="否" :value=1 > </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="分享标题" :label-width="formLabelWidth" prop="shareTitle">
                            <el-input size="small" v-model="userData.shareTitle" auto-complete="off" :disabled="false"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="updateTime">
                            <el-date-picker
                                v-model="userData.updateTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="12:00:00"
                                value-format="timestamp"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
                            <el-date-picker
                                v-model="userData.endTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="12:00:00"
                                value-format="timestamp"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="优先级" :label-width="formLabelWidth" prop="sOrder">
                            <el-input size="small" v-model="userData.sOrder" auto-complete="off" :disabled="false"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="类型" :label-width="formLabelWidth" prop="classtype"  >
                            <el-select v-model="userData.classtype" placeholder="请选择" multiple>
                                <!--<el-option  :key=0 label="默认" :value=0></el-option>-->
                                <el-option  :key=1 label="宠物" :value=1 > </el-option>
                                <el-option  :key=2 label="会议" :value=2> </el-option>
                                <el-option  :key=3 label="培训" :value=3> </el-option>
                                <el-option  :key=4 label="演出" :value=4> </el-option>
                                <el-option  :key=5 label="音乐节" :value=5> </el-option>
                                <el-option  :key=6 label="运动" :value=6> </el-option>
                                <el-option  :key=7 label="展会" :value=7> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目描述" :label-width="formLabelWidth" prop="proDesc">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userData.proDesc">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">

                    <el-form-item label="分享描述" :label-width="formLabelWidth" prop="shareDesc">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userData.shareDesc">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="封面图片" :label-width="formLabelWidth" prop="coverImg">
                           <input type="file" ref="coverImg1" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="分享图片" :label-width="formLabelWidth" prop="shareIconImg">
                            <input type="file" ref="shareIconImg1" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="广告图片" :label-width="formLabelWidth" prop="advertiseImg">
                            <input type="file" ref="advertiseImg1" />
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button size="small" type="primary" @click="doAddProject">添加</el-button>
                <el-button size="small" @click="close" v-text="$t('Cancel')"></el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        props : {
            addProjectDialogVisi: false,
        },
        data() {
            return {
                addKeyPersonForm: Object.assign({}, this.keypersonList),
                dialogImageUrl: Object.assign({}, this.keypersonList).iconUrl ,
                formData: new FormData(),
                colw : 8,
                rules: {

                },
                formLabelWidth: '120px',
                userData : {
                    projectSeq : "",
                    proTitle : "",
                    shareTitle : "",
                    proDesc : "",
                    shareDesc : "",
                    status : 1 ,
                    isShow : 0 ,
                    sOrder : 10000,
                    classtype:[1],
                    updateTime : {},
                    endTime : {},
                },
/*
                userData : {
                    projectSeq : "001",
                    proTitle : "标题001",
                    shareTitle : "分享标题001",
                    proDesc : "项目描述001 这事一个描述这事一个描述这事一个描述这事一个描述",
                    shareDesc : "分享描述001 这事一个描述这事一个描述这事一个描述这事一个描述",
                    status : 1 ,
                    isShow : 0 ,
                },
*/
            }
        },

        methods: {
            close(){
                let vm = this
                vm.$refs.projectForm.resetFields()
                vm.$parent.addProjectDialogVisi = false
            },
            doAddProject(){
                let vm = this
                let params = new FormData();
                let img1 = vm.$refs.coverImg1.files[0];
                let img2 = vm.$refs.shareIconImg1.files[0];
                let img3 = vm.$refs.advertiseImg1.files[0];
                params.append('coverImg', img1, img1.name);
                params.append('shareIconImg', img2, img2.name);
                params.append('advertiseImg', img3, img3.name);

                var infos = JSON.stringify(vm.userData);
                params.append("basicInfo" , infos  );

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                vm.$http.post('photo/createProject',  params   ,config  )
                    .then(function (response) {
                        if(response.data.result){
                            vm.$message({
                                message: vm.$t('Success'),
                                type: 'success'
                            });
                            vm.close();
                            vm.$parent.refreshTable();
                        }else {
                            vm.$message.error(vm.$t('Failed'));
                        }
                    }).catch(function (error) {
                        vm.$message.error(vm.$t('Failed'));
                        console.log(error)
                    })
            },
        },
        created: function () {
            let vm = this
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-dialog .el-input{
        width: 90%;
    }
    .el-dialog .el-select{
        width: 100%;
    }

    .upload-img-form1{
        width: 100px;
        height: 100px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
    }
    .upload-img1{
        width: 100px;
        height: 100px;
        overflow:hidden;
    }
    .upload-img1:hover {
        border-color: #409EFF;
        color: #409EFF;
    }

</style>
